<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>云钢</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css">
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        .aui-bar-light{ color: black; }
        .aui-bar-nav.aui-bar-light .aui-iconfont{ color: black; }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav aui-bar-light" id="header">
        <a class="aui-pull-left aui-btn" onclick="backpage()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">详情</div>
    </header>
    <div id="app" v-cloak>
        <div class="padding-lr-xl padding-tb" style="background: white;">
            <h3 class="padding-lr-xl text-center text-bold">中国浙江生长的这种树,比钢铁还要硬,可用于航天设备零件制造!</h3>
            <p class="text-center margin-top-xs">2021-04-27 10:25</p>
            <p class="margin-top-xl text-black text-indent">正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容。</p>
            <div class="margin-top" style="width: 100%;"><img src="../../image//newsdetail.png" alt="" style="width: 100%;"></div>
            <p class="margin-top text-black text-indent">正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容。</p>
        </div>
        <div class="margin-top padding-lr-xl padding-tb" style="background: white;">
            <p>阅读 1.8万</p>
            <div class="margin-top-xl flex-between" style="color:#576A94">
                <div tapmode onclick="openSharebox()"><i class="aui-iconfont aui-icon-share padding-right-xs"></i>分享</div>
                <div><i class="aui-iconfont aui-icon-like padding-right-xs"></i>收藏</div>
                <div><i class="aui-iconfont aui-icon-laud padding-right-xs"></i>赞 198</div>
            </div>
        </div>
        <div class="padding-lr-xl padding-tb">
            <div style="background: white;" class="radius padding-lr"><input type="text" placeholder="写下您的留言" tapmode onclick="openActionsheet()"></div>
        </div>
        <div class="padding-lr-xl padding-tb" style="background: white;">
            <h3 class="margin-top margin-bottom">所有留言（245）</h3>
            <div class="margin-top">
                <div class="margin-top-xl flex-between">
                    <div style="width: 2rem;"><img src="../../image/send/xx03.png" alt="" style="width: 100%;"></div>
                    <div style="width: 84%;" class="solid-bottom">
                        <p>谢莎莎</p>
                        <h4>钢材行业发展一直很稳</h4>
                        <p>2021-04-27 10:04</p>
                    </div>
                </div>

                <div class="margin-top-xl flex-between">
                    <div style="width: 2rem;"><img src="../../image/send/xx03.png" alt="" style="width: 100%;"></div>
                    <div style="width: 84%;" class="solid-bottom">
                        <p>谢莎莎</p>
                        <h4>钢材行业发展一直很稳</h4>
                        <p>2021-04-27 10:04</p>
                    </div>
                </div>

                <div class="margin-top-xl flex-between">
                    <div style="width: 2rem;"><img src="../../image/send/xx03.png" alt="" style="width: 100%;"></div>
                    <div style="width: 84%;" class="solid-bottom">
                        <p>谢莎莎</p>
                        <h4>钢材行业发展一直很稳</h4>
                        <p>2021-04-27 10:04</p>
                    </div>
                </div>
            </div>
            <p class="text-center margin-top-xl">点击加载更多</p>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/aui-actionsheet.js" ></script>
<script type="text/javascript" src="../../script/aui-sharebox.js" ></script>

<script type="text/javascript">

    var vm = {
        el: '#app',
        data: {
            list: []
        },
        mounted: function(){
            this.getList();
        },
        methods: {
            getList: function(){
                let that = this;
            }
        }
    }
    apiready = function() {
        $api.fixStatusBar(
            $api.byId("header")
        );
        // window.app = new Vue(vm);
        

    };

    function backpage(){
        api.closeWin({
            name: api.winName
        })
        
    };

    apiready = function(){
        api.parseTapmode();
    }
    var actionsheet = new auiActionsheet();
    function openActionsheet(){
        actionsheet.init({
            frameBounces:true,//当前页面是否弹动，（主要针对安卓端）
            title:"这里是标题",
            cancelTitle:'这里取消按钮',
            destructiveTitle:'红色警告按钮',
            buttons:['拍照','图库选择']
        },function(ret){
            if(ret){
                document.getElementById("button-index").textContent = ret.buttonIndex;
                document.getElementById("button-title").textContent = ret.buttonTitle;
            }
        })
    };

    apiready = function(){
        api.parseTapmode();
    }
    var sharebox = new auiSharebox();
    function openSharebox(){
        sharebox.init({
            frameBounces:true,//当前页面是否弹动，（主要针对安卓端）
            buttons:[{
                image:'../../image/wx.png',
                text:'微信好友',
                value:'wx'//可选
            },{
                image:'../../image/wx-circle.png',
                text:'朋友圈',
                value:'wx-circle'
            }],
            col:5,
            cancelTitle:'关闭'//可选,当然也可以采用下面的方式使用图标
            // cancelTitle:'<i class="aui-iconfont aui-icon-close aui-font-size-16"></i>'//可选
        },function(ret){
            if(ret){
                document.getElementById("button-index").textContent = ret.buttonIndex;
                document.getElementById("button-value").textContent = ret.buttonValue;
            }
        })
    }

</script>

</html>
